<template>

  <div>

    <el-form :inline="true" :model="MedicalCard" class="demo-form-inline">
        <el-input style="width: 300px" prefix-icon="el-icon-search" placeholder="请输入就诊卡号" v-model="MedicalCard.id"></el-input>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="showAddView()">新办就诊卡</el-button>
      </el-form-item><br>
<!--      <el-form-item label="姓名">
        <el-input v-model="MedicalCard.name" disabled></el-input>
      </el-form-item>
      <el-form-item label="手机号码">
        <el-input v-model="MedicalCard.telephone" disabled></el-input>
      </el-form-item>
      <el-form-item label="性别">
        <el-input v-model="MedicalCard.sex" disabled></el-input>
      </el-form-item>
      <el-form-item label="身份证">
        <el-input v-model="MedicalCard.idCard" disabled></el-input>
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input v-model="MedicalCard.email" disabled></el-input>
      </el-form-item>-->
    </el-form>
    <el-descriptions class="margin-top" title="就诊卡信息" :column="5" :size="size" border>
      <template slot="extra">
        <el-button type="primary" size="small">操作</el-button>
      </template>
      <el-descriptions-item ><template slot="label">
        <i class="el-icon-user"></i>
        姓名
      </template>
        {{ MedicalCard.name }}</el-descriptions-item>
      <el-descriptions-item ><template slot="label">
        <i class="el-icon-user-solid"></i>
        性别
      </template>
        {{MedicalCard.sex}}</el-descriptions-item>
      <el-descriptions-item ><template slot="label">
        <i class="el-icon-mobile-phone"></i>
        手机号码
      </template>
        {{ MedicalCard.telephone }}</el-descriptions-item>
      <el-descriptions-item><template slot="label">
        <i class="el-icon-postcard"></i>
        身份证号
      </template>
        {{MedicalCard.idCard}}</el-descriptions-item>
      <el-descriptions-item><template slot="label">
        <i class="el-icon-message"></i>
        邮箱
      </template>
        {{ MedicalCard.email }}</el-descriptions-item>
    </el-descriptions><br>
    <el-form :inline="true"  class="demo-form-inline">
      <el-select v-model="did" placeholder="请选择">
        <el-option
            v-for="item in deps"
            :key="item.id"
            :label="item.name"
            :value="item.id">
        </el-option>
      </el-select>
      <el-select v-model="tid" placeholder="请选择">
        <el-option
            v-for="item in type"
            :key="item.value"
            :label="item.name"
            :value="item.value">
        </el-option>
      </el-select>
      <el-form-item>
        <el-button type="primary" @click="getDoctors">查询</el-button>
      </el-form-item><br>
    </el-form>
    <el-table
        ref="singleTable"
        :data="doctors"
        highlight-current-row
        @current-change="handleCurrentChange"
        style="width: 100%"
        height="300">
      <el-table-column
          prop="id"
          label="编号"
          width="80">
      </el-table-column>
      <el-table-column
          prop="name"
          label="姓名"
          width="80">
      </el-table-column>
      <el-table-column
          prop="sex"
          label="性别"
          width="80">
      </el-table-column>
      <el-table-column
          prop="role.description"
          label="角色"
          width="100">
      </el-table-column>
      <el-table-column
          prop="department.name"
          label="科室"
          width="100">
      </el-table-column>
      <el-table-column
          prop="department.address"
          label="门诊地址"
          width="250">
      </el-table-column>
      <el-table-column
          prop="joblevel.name"
          label="职称"
          width="100">
      </el-table-column>
      <el-table-column
          prop="joblevel.registeredPrice"
          label="挂号费"
          width="100">
      </el-table-column>

    </el-table>
    <div style="margin-top: 20px">
      <el-button @click="setCurrent(tableData[1])">选中第二行</el-button>
      <el-button @click="setCurrent()">取消选择</el-button>
    </div><br>
    <div>
      <el-form :inline="true"  class="demo-form-inline">
        <el-form-item label="挂号费用(元)">
          <el-input v-model="price" placeholder="请输入挂号费(元)"></el-input>
        </el-form-item>
        <el-form-item label="实收金额(元)">
          <el-input v-model="resultPrice" placeholder="请输入实际收取金额(元)" ></el-input>
        </el-form-item>
        <el-form-item label="找回金额(元)">
          <el-input v-model="backPrice" placeholder="找回金额(元)"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getBack">找零</el-button>
        </el-form-item>
        <el-form-item label="">
          <el-button type="success" @click="onSubmit2()" >提交挂号</el-button>
        </el-form-item>
      </el-form>

    </div>

    <el-dialog title="新办就诊卡" :visible.sync="dialogFormVisible">
      <el-form :model="addMedicalCard">
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model="addMedicalCard.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth">
          <el-select v-model="addMedicalCard.sex" placeholder="请选择性别">
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="身份证号" :label-width="formLabelWidth">
          <el-input v-model="addMedicalCard.idCard" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机号" :label-width="formLabelWidth">
          <el-input v-model="addMedicalCard.telephone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" :label-width="formLabelWidth">
          <el-input v-model="addMedicalCard.email" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="doAddMedicalCard">确 定</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script>

import {Message} from "element-ui";

export default {
  name: "Register",
  data(){
    return{


      MedicalCard:{
        id:'',
        name:'',
        sex:'',
        telephone:'',
        idCard:'',
        email:''
      },
      deps:'',
      did:'',
      tid:'',
      type:[
        {
          name:'普通门诊',
          value:0
        },
        {
          name:'急诊',
          value:1
        }
      ],
      doctors:[
        {
          role:'',
          department:'',
          joblevel:''

        }
      ],
      role:{
        id:'',
        name:''
      },
      department:{
        name:'',
        address:''
      },
      joblevel:{
        name:'',
        registeredPrice:'',
        registeredNum:''
      },
      currentRow:null,
      price:'',
      resultPrice:'',
      backPrice:'',
      Registration:{
        mid:'',
        pid:'',
        uid:'',
        payType:'现金',
        payStatus:'',
        revPrice:'',
        backPrice:'',
        backStatus:false,

      },
      patient: {},
      dialogFormVisible:false,
      formLabelWidth: '120px',
      addMedicalCard:{
        name:'',
        sex:'',
        idCard:'',
        telephone:'',
        email:''
      },
      size:''
    }
  },
  methods:{
    //根据就诊卡号获取卡号信息
    onSubmit(){
      this.getRequest('/registration/getMCard/'+this.MedicalCard.id).then(resp=>{
        if(resp){
          this.initDepartment();
          this.initPatient();
          this.MedicalCard=resp.obj;
          this.Registration.mid=this.MedicalCard.id;
          this.doctors='';
        }
      })
    },
    //根据就诊卡号获取患者信息
    initPatient(){
      this.getRequest('/registration/getPatientByMid/'+this.MedicalCard.id).then(resp=>{
        if(resp){
          this.patient=resp;
          this.Registration.pid=resp.id;
        }
      })
    },
    //获取所有科室
    initDepartment(){
      this.getRequest("/department/getDeps").then(resp=>{
        if(resp){
          this.deps=resp;
        }
      })
    },
    //根据科室类型和门诊类型获取医生信息
    getDoctors(){
      this.getRequest('/registration/getUserWithDoctor?did='+this.did+'&tid='+this.tid+'&mid='+this.MedicalCard.id).then(resp=>{
        if(resp){
          this.doctors=resp;

        }
      })
    },
    //取消选择医生
    setCurrent(row) {
      this.$refs.singleTable.setCurrentRow(row);
      this.price='';
      this.resultPrice='';
      this.backPrice='';
    },
    //选择某个医师
    handleCurrentChange(val) {
      this.currentRow = val;
      this.price=this.currentRow.joblevel.registeredPrice;
      this.Registration.uid=this.currentRow.id;
      this.resultPrice='';
      this.backPrice='';
    },
    //找零
    getBack(){
      if(this.price<this.resultPrice){
        this.backPrice=this.resultPrice-this.price;
      }
      else{
        Message.error("实收金额不足")
      }
    },
    //提交挂号
    onSubmit2(){
      this.Registration.revPrice=this.resultPrice;
      this.Registration.backPrice=this.backPrice;
      this.$confirm('患者:'+this.MedicalCard.name+'--医生:'+this.currentRow.name+'--科室:'+this.currentRow.department.name+'--是否确认挂号?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.postRequest("/registration/addRegistration",this.Registration).then(resp=>{
          if(resp){

          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消挂号'
        });
      });
    },
    //显示新办就诊卡界面
    showAddView(){
      this.dialogFormVisible=true;

    },
    //新办就诊卡
    doAddMedicalCard(){

      this.postRequest("/registration/addMCard",this.addMedicalCard).then(resp=>{
        if(resp){
          this.dialogFormVisible=false;
          this.addMedicalCard='';
        }
      })

    }
  }
}
</script>

<style scoped>

</style>